import React from "react";
import "../CSS/panel.css";

const TheInputVariableDropdown = (props) => {
  const groupedVariables = {};
  props.variables.forEach((variable) => {
    const nodeLabel = variable.nodeLabel;
    if (!groupedVariables[nodeLabel]) {
      groupedVariables[nodeLabel] = [];
    }
    groupedVariables[nodeLabel].push(variable);
  });

  return (
    props.variables.length > 0 && (
      <div key= "inputVarDropdown" className="inputVarDropdown">
        {Object.keys(groupedVariables).map((nodeLabel, index) => (
          <div key={index}>
            <span className="mainVarNode">{nodeLabel}</span>
            {groupedVariables[nodeLabel].map((variable, varIndex) => (
              <div key={varIndex} onClick={() => props.onSelect(variable)} style={{ padding: '5px', cursor: 'pointer' }}>
                <span className="variableOfDropdown">{variable.variableName}</span>
              </div>
            ))}
          </div>
        ))}
      </div>
    )
  );
};

export default TheInputVariableDropdown;
